import React from "react"
import {withRouter} from "react-router-dom"
import {Shuju,Xiangsi,Pingjia} from "../api/index"
import { Accordion, List } from 'antd-mobile';
import "../style/index.css"
class Xiangqing extends React.Component{
    constructor(props){
        super(props)
        this.state={
            aa:"",
            arr:{},
            brs:{},
            xs:[],
            pl:[]
        }
    }
    renderContent(location) {
        // console.log(location);
       let { pathname } = location;
      this.setState({
          selectedTab: pathname
      })
  }
    componentDidMount(){
       let _this=this 
       Shuju(this.props.location.state.id).then(res=>{
        //    console.log(res);
        //     console.log(res.data.data.brs,"0000000000")
         _this.setState({
           arr:res.data.data,
           brs:res.data.data.brs,
         
           
       })
       })
       Xiangsi(this.props.location.state.id).then(res=>{
        // console.log(res.data.mvs);
        _this.setState({
           xs:res.data.mvs
          
            
        })
    })
    Pingjia(this.props.location.state.id).then(res=>{
        console.log(res.data.comments);
       _this.setState({
           pl:res.data.comments
     })
        
    })
      }
     
      onChange = (key) => {
        console.log(key);
      }
      
    render(){
        
        return(
           <div id="bbbbb">
               <div  >
               {/* <Player ref="player" videoId="video-1" autoPlay="true"> */}
        {/* {this.state.brs((item,id)=>(<source key={id}>{item}</source>))} */}
            <video src={this.state.brs[240]} controls="controls" />

                {/* </Player> */}
                   <div style={{ marginTop: 10, marginBottom: 10 }}>
         <Accordion accordion openAnimation={{}} className="my-accordion" onChange={this.onChange}>
           <Accordion.Panel header="Title 1">
             <List className="my-list">
         <List.Item>{this.state.arr.name}</List.Item>
                     <ul>
                 <li>发行时间：{this.state.arr.publishTime}</li>
                      <li>{this.state.arr.desc}</li>
                        
                     </ul>                           
             </List>
           </Accordion.Panel>
          </Accordion>
          <div>
              <img src={this.state.arr.cover} alt="" width="20px" height="20px" />
              <button>+收藏</button>
          </div>
          <ul>
              <h1  className="zx_zx">相关视屏</h1>
        {this.state.xs.map((item,id)=>(<li key={id}><img src={item.cover} className="xrimg"></img>
        <h1 >{item.name}</h1>
        </li>))}
          </ul>
       </div>
            </div>
                <div>
                    <ul>
        {this.state.pl.map((item,index)=>(<li key={index} className="zx_plli"><h1 className="plname"><img src={item.user.avatarUrl} className="touxiang"></img>
        {item.user.nickname}</h1><p className="zx_pl">&nbsp;&nbsp;&nbsp;&nbsp;{item.content}</p></li>))}
                    </ul>
                </div>
           </div>

        )
    }
}
export default Xiangqing